<template>
  <a-dropdown v-if="$slots.user && fullName"
              placement="bottomRight"
              class="ant-pro-global-header-index-action">
    <!-- 头像 -->
    <span class="ant-pro-account-avatar">
      <Avatar v-if="avatar"
              size="small"
              :src="avatar"
              class="antd-pro-global-header-index-avatar" />
      <Avatar v-else
              size="small"
              icon="user"
              class="antd-pro-global-header-index-avatar" />
      <span style="display:inline-block; vertical-align:middle; padding-left: 10px">{{ fullName }}</span>
    </span>
    <template v-slot:overlay>
      <!-- 自定义用户下拉菜单插槽 -->
      <slot name="dropdownMenu" />
      <a-menu v-if="$slots.dropdownMenu"
              :visible="true">
        <!-- 工作单位 -->
        <a-sub-menu v-if="unitList.length>0">
          <span slot="title">
            <a-icon type="deployment-unit" />
            工作单位&nbsp;
          </span>
          <a-menu-item v-for="(item, index) in unitList"
                       :key="index">
            <div @click="handleUnitClick(index, item)"
                 :class="item.selected ? 'x-user-menu-unit-active' : ''">
              {{ item.name }}
              <a-icon v-if="item.selected"
                      type="check" />
            </div>
          </a-menu-item>
        </a-sub-menu>

        <a-menu-item @click="$emit('showPersonalSetting')">
          <a-icon type="profile" />
          个性化设置
        </a-menu-item>

        <a-menu-item @click="onPasswordClick">
          <a-icon type="lock" />
          修改密码
        </a-menu-item>

        <a-menu-divider />
        <a-menu-item key="logout"
                     @click="handleLogout">
          <a-icon type="logout" />
          退出登录
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script>
export default {

}
</script>

<style>
</style>